<template>
  <div class="audit-info-wrapper">
    <el-table
      v-if="hasData"
      :data="data"
      size="small"
      border
    >
      <el-table-column type="index" label="序号" width="60" />
<!--      <el-table-column-->
<!--        v-if="showRound"-->
<!--        label="审核轮次"-->
<!--        prop="roundNo"-->
<!--        width="80"-->
<!--      />-->
<!--      <el-table-column-->
<!--        v-if="showOrder"-->
<!--        label="审核顺序"-->
<!--        prop="auditOrder"-->
<!--        width="80"-->
<!--      />-->
      <el-table-column label="审核模式" :width="modeColumnWidth">
        <template slot-scope="scope">
          <dict-tag :options="nodeModeOptions" :value="scope.row.auditMode" />
        </template>
      </el-table-column>
      <el-table-column label="审核状态" :width="statusColumnWidth">
        <template slot-scope="scope">
          <dict-tag :options="auditStatusOptions" :value="scope.row.auditStatus" />
        </template>
      </el-table-column>
      <el-table-column :label="roleColumnLabel" :min-width="roleColumnWidth">
        <template slot-scope="scope">
          {{ getRoleLabel(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column label="审核信息" :min-width="auditInfoWidth">
        <template slot-scope="scope">
          <div v-if="hasAuditRecords(scope.row)" class="audit-record-list">
            <div
              v-for="record in scope.row.auditRecords"
              :key="record.auditRecordId || `${record.userId || ''}-${record.createTime || ''}`"
              class="audit-record-item"
            >
              <span class="audit-record-user">{{ record.userName || record.userId || '-' }}</span>
              <span class="audit-record-result">{{ getAuditResultLabel(record.auditResult) }} {{ record.rollbackRoleName? ` -> ${record.rollbackRoleName}` : '' }}</span>
              <span class="audit-record-time">{{ record.createTime || '-' }}</span>
            </div>
          </div>
          <span v-else>{{ formatAssignees(scope.row.auditAssignees) }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        v-if="showCopyInfo"
        label="抄送信息"
        :min-width="copyInfoWidth"
      >
        <template slot-scope="scope">
          {{ formatAssignees(scope.row.copyAssignees) }}
        </template>
      </el-table-column> -->
    </el-table>
    <div v-else class="audit-info-empty">{{ emptyText }}</div>
  </div>
</template>

<script>
import DictTag from '@/components/DictTag'

export default {
  name: 'AuditInfoTable',
  components: { DictTag },
  props: {
    data: {
      type: Array,
      default: () => []
    },
    nodeModeOptions: {
      type: Array,
      default: () => []
    },
    auditStatusOptions: {
      type: Array,
      default: () => []
    },
    auditResultOptions: {
      type: Array,
      default: () => []
    },
    formatFallback: {
      type: Function,
      default: () => '-'
    },
    showRound: {
      type: Boolean,
      default: false
    },
    showOrder: {
      type: Boolean,
      default: false
    },
    showCopyInfo: {
      type: Boolean,
      default: true
    },
    emptyText: {
      type: String,
      default: '暂无审核信息'
    },
    roleFields: {
      type: Array,
      default: () => ['auditRoleName', 'auditRoleId']
    },
    roleColumnLabel: {
      type: String,
      default: '审批角色'
    },
    roleColumnWidth: {
      type: [Number, String],
      default: 120
    },
    auditInfoWidth: {
      type: [Number, String],
      default: 350
    },
    copyInfoWidth: {
      type: [Number, String],
      default: 200
    },
    modeColumnWidth: {
      type: [Number, String],
      default: 80
    },
    statusColumnWidth: {
      type: [Number, String],
      default: 80
    }
  },
  computed: {
    hasData() {
      return Array.isArray(this.data) && this.data.length > 0
    }
  },
  methods: {
    formatAssignees(list) {
      try {
        return this.formatFallback(list)
      } catch (error) {
        return '-'
      }
    },
    hasAuditRecords(row) {
      return row && Array.isArray(row.auditRecords) && row.auditRecords.length > 0
    },
    getAuditResultLabel(value) {
      if (value === undefined || value === null || value === '') {
        return '-'
      }
      const dictList = this.auditResultOptions || []
      const found = dictList.find(item => `${item.value}` === `${value}`)
      return found ? found.label : value
    },
    getRoleLabel(row) {
      if (!row) return '-'
      for (const field of this.roleFields) {
        const val = row[field]
        if (val !== undefined && val !== null && val !== '') {
          return val
        }
      }
      return '-'
    }
  }
}
</script>

<style scoped>
.audit-info-wrapper {
  width: 100%;
}
.audit-info-empty {
  padding: 12px 0;
  text-align: center;
  color: #909399;
}
.audit-record-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.audit-record-item {
  display: flex;
  align-items: center;
  line-height: 1.4;
  position: relative;
  padding-right: 160px;
}
.audit-record-user {
  min-width: 72px;
  max-width: 120px;
  color: #303133;
  margin-right: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}
.audit-record-result {
  color: #409EFF;
  font-weight: 500;
  white-space: nowrap;
  margin-right: 4px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.audit-record-time {
  color: #909399;
  font-size: 12px;
  white-space: nowrap;
  position: absolute;
  right: 70px;
  width: 160px;
  text-align: right;
}
</style>

